﻿<template>
    <div class="layui-row layui-col-space15 clearfix" id="_news">

        <!--左边文章列表-->
        <div class="layui-col-md8">
            <div class="left-box shadow" style="padding:5px;background-color:#fff;">
                <div class="carousel-box" style="position:relative;background-color: #fff;overflow:hidden">
                    <div class="layui-carousel" id="_newstaobao">
                        <div carousel-item="">

                            <div v-for="pp in data">
                                <a :href="pp.url" data-type="0" biz-itemid="null" data-tmpl="470x190" data-tmplid="635" data-rd="2" data-style="2" data-border="1" :title="pp.title" target="_blank">
                                    <img :src="pp.pict_url" style="width:100%;height:100%">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-box">
                <p class="left-box-title shadow"><i class="fa fa-diamond fa-spin" aria-hidden="true"></i>全部文章</p>

                <div class="article shadow clearfix sr-listshow" v-for="item in news">
                    <div class="article-left">
                        <div style="width:100%;height:100%; margin: 0 auto;text-align:center">
                            <i :class="'fa '+item.Pic+' fa-5x'" :alt="item.Title" v-bind:style="{color:SetColor(item)}"></i>
                        </div>
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <a :href="'#/newsDetail/'+item.ID">{{item.Title}}</a>
                        </div>
                        <div class="article-abstract">
                            {{item.Title}}
                        </div>
                        <div class="article-footer">
                            <span class="layui-hide-xs"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;<a style="color:#009688" href="#"></a></span>
                            <span><i class="fa fa-clock-o" aria-hidden="true"></i>{{item.Adddate}}</span>
                            <span class="article-viewinfo">{{item.views}}阅读</span>
                            <!--<span class="article-viewinfo">1评论</span>
                            <span class="article-viewinfo">6赞</span>-->
                            <a class="read layui-btn layui-btn-xs layui-btn-normal layui-hide-xs" :href="'#/newsDetail/'+item.ID" :title=" item.Title">阅读全文</a>
                        </div>
                    </div>
                    <div class="flag flag-left">推荐</div>
                </div>

                <div class="blog-pagebox">
                 
                    <div id="newspage">

                    </div>
                </div>
            </div>
        </div>
        <!--右边小栏目-->
        <div class="layui-col-md4">
            <div class="layui-row layui-col-space10">

                <div class="layui-col-sm6 layui-col-md12">
                    <div class="blog-card shadow">
                        <div class="blog-card-title">
                            <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe756;</i></span>
                            <span class="text">热文排行</span>
                        </div>
                        <ul class="blog-card-ul">
                            <li v-for="item in newslist">
                                <span class="layui-badge  ">荐</span><a :href="'#/newsDetail/'+item.ID" :title="item.Title">{{item.Title}}</a>
                            </li>
                        </ul>
                    </div>
                </div>


                <div class="layui-col-sm6 layui-col-md12">
                    <div class="blog-card shadow sr-rightmodule">
                        <div class="carousel-box" style="position:relative;background-color: #fff;overflow:hidden">
                            <div class="layui-carousel" id="_news_taobao">
                                <div carousel-item="">

                                    <div v-for="pp in data">
                                        <a :href="pp.url" data-type="0" biz-itemid="null" data-tmpl="470x190" data-tmplid="635" data-rd="2" data-style="2" data-border="1" :title="pp.title" target="_blank">
                                            <img :src="pp.pict_url" style="width:100%;height:100%">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md12">
                    <div class="blog-card shadow sr-rightmodule">
                        <div class="blog-card-title">
                            <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe6c6;</i></span>
                            <span class="text">微信关注</span>
                        </div>
                        <ul class="blog-card-ul">
                            <li style="text-align: center;">
                                <img src="/images/qrcode_for_gh_8044f5512351_258.jpg" />
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md12">
                    <div class="blog-card shadow sr-rightmodule" data-scroll-reveal>
                        <div class="blog-card-title">
                            <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe64c;</i></span>
                            <span class="text">友情链接</span>
                        </div>
                        <ul class="blogroll">
                            <li><a target="_blank" href="http://www.layui.com/" title="layui官网">layui官网</a></li>
                            <li><a target="_blank" href="http://oa.asxsyd92.com/" title="net core 版OA系统">net core 版OA系统（正在开发）</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    layui.use(["jquery", 'layer', 'laypage'], function () {
        document.title = "工作经验分享|自学天才|爱上歆随懿恫|asxsyd92.com";
        var $ = layui.jquery, layer = layui.layer, laypage = layui.laypage;;
        module.exports = {
            name: '_news',
            data() {
                return {
                    data: [],
                    news: [],
                    newsmian: [],
                    newslist: []
                }
            }, mounted: function () {
                var m = this;
                m.ajax();
            },
            methods: {
                ajax: function () {
                    var m = this;
                    if (this.news.length <= 0) {
                        var lay = layer.msg('正在拼命加载...', { icon: 16, shade: 0.5, time: 20000000 });

                        fetch("/api/Article/GetNew?page=" + 1 + "&limit=5").then((data) => data.text()).then((data) => {
                            var my = JSON.parse(data);
                            layer.close(lay);
                            setTimeout(function () {

                                $('body,html').animate({ scrollTop: 0 }, 500);
                                gongdong();
                            }, 100);
                            //执行一个laypage实例
                            laypage.render({
                                elem: 'newspage' //注意，这里的 test1 是 ID，不用加 # 号
                                , count: my.count //数据总数，从服务端得到
                                , jump: function (obj, first) {

                                    page = obj.curr;  //改变当前页码
                                    limit = obj.limit;
                                    //首次不执行
                                    if (!first) {
                                        //do something
                                        fetch("/api/Article/GetNew?page=" + page + "&limit=" + limit).then((data) => data.text()).then((data) => {
                                            var my = JSON.parse(data);
                                            m.news = my.data;
                                            setTimeout(function () {

                                                $('body,html').animate({ scrollTop: 0 }, 500);
                                                gongdong();
                                            }, 100);
                                        });
                                    }
                                }
                            });
                            this.news = my.data;
                        })
                    }
                    if (this.newslist.length <= 0) {
                        fetch("/api/Article/GetRandomNew?title=&page=" + 1 + "&limit=12").then((data) => data.text()).then((data) => {
                            var my = JSON.parse(data);

                            this.newslist = my.data;

                        })
                    }
                    var sj = "";
                    if (this.data.length <= 0) {
                        fetch("/api/taobao/TaoBaoSearch?title=" + sj + "&page=" + 1 + "&limit=12").then((data) => data.text()).then((data) => {
                            var my = JSON.parse(data);

                            this.data = my.data;
                            console.log(this.data);
                            setTimeout(function () {
                                var carousel = layui.carousel;    //图片轮播
                                carousel.render({
                                    elem: '#_newstaobao'
                                    , width: '100%'
                                    , height: '200px'
                                    , interval: 5000
                                });
                                // tips();
                            }, 200);
                        })
                    }
               
                }
                , SetColor: function (_this) {
              
                if (_this.TitleColor === null || _this.TitleColor === undefined) {
                    return "#009688";
                } else return _this.TitleColor;

            }
            }
            ,
            created() {
                closemuen();
            }
        }


        function gongdong() {

            /msie[6 | 7 | 8 | 9]/i.test(navigator.userAgent) || (window.sr = new ScrollReveal({
                reset: !1
            }), sr.reveal(".sr-left", {
                origin: "left",
                scale: 1,
                opacity: .1,
                duration: 1200
            }), sr.reveal(".sr-bottom", {
                scale: 1,
                opacity: .1,
                distance: "60px",
                duration: 1e3
            }), sr.reveal(".sr-listshow", {
                distance: "30px",
                duration: 1e3,
                scale: 1,
                opacity: .1
            }), sr.reveal(".sr-rightmodule", {
                origin: "top",
                distance: "60px",
                duration: 1e3,
                scale: 1,
                opacity: .1
            }));
            layer.photos({
                photos: ".article-left",
                anim: 5
            });
            layer.photos({
                photos: ".article-detail-content",
                anim: 5,
                move: !1
            })

        }
    });
</script>